<template>
  <div>
    <van-nav-bar title="积分商品" left-text="返回" @click-left="onClickLeft" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <el-card class="box-card" style="text-align:center;margin:3px 3px 0px 3px">
      <van-row>
        <van-col :span="8">
          <span class="nav" @click="idSort" :class="{'active':isActive==0}">综合</span>
        </van-col>
        <van-col :span=" 8">
          <span class="nav" @click="priceSort" :class="{'active':isActive==2}">价格
            <van-icon name="sort" />
          </span>
        </van-col>
        <van-col :span="8">
          <span class="nav" @click="timeSort" :class="{'active':isActive==1}">新品</span>
        </van-col>
      </van-row>
    </el-card>
    <!-- 列表 -->
    <van-row>
      <van-col :span="12" v-for="(item,index) in goodsList" :key="item.id" style="" @click="toDetails(item.id)">
        <el-card class="box-card" style="text-align:center;margin:9px">
          <van-image :src="baseUrl+item.image" width="120" height="120" />
          <span v-text="item.goodsName"></span>
          <div><span style="color:orange" v-text="(item.vipPrice/10).toFixed(0)+'积分'"></span></div>
        </el-card>
      </van-col>
    </van-row>
    <div style="margin-bottom:80px;text-align:center">
      <div v-if="length<goodsList.length" @click='loadMore' class="lod">点击加载更多</div>
      <div class="lod" v-else>没有更多了</div>
    </div>
    <xFooter />
  </div>
</template>
<script>
import { selectIntegral } from "@/api/goods/goods";
export default {
  data () {
    return {
      goodsList: [],
      error: true,
      length: 4,
      isActive: 0
    }
  },
  created () {
    this.getGoodsList()
  },
  methods: {
    toDetails (val) {
      this.$router.push({ name: 'details', params: { id: val } })
    },
    //综合排序
    idSort () {
      this.isActive = 0
      this.goodsList.sort((a, b) => {
        return b.id - a.id
      })
    },
    //价格排序
    priceSort () {
      if (this.isActive < 2) {
        this.isActive = 2
        this.goodsList.sort((a, b) => {
          return a.price - b.price
        })
      } else if (this.isActive == 2) {
        this.isActive = 3
        this.goodsList.sort((a, b) => {
          return b.price - a.price
        })
      } else if (this.isActive == 3) {
        this.isActive = 2
        this.goodsList.sort((a, b) => {
          return a.price - b.price
        })
      }
    },
    timeSort () {
      this.isActive = 1
      this.goodsList.sort((a, b) => {
        return Date.parse(b.createTime) - Date.parse(a.createTime)
      })

    },
    // 新品排序
    onClickLeft () {
      this.$router.push('/')
    },
    loadMore () {
      this.length += 4;
    },
    getGoodsList () {
      selectIntegral().then(res => {
        this.goodsList = res.rows
        this.idSort()
      })
    },
  }
}
</script>
<style scoped>
.nav {
  color: rgb(156, 156, 156);
  font-size: 14px;
}
.active {
  color: red;
}
.lod {
  color: rgb(160, 159, 159);
  font-size: 14px;
}
</style>